<!-- 显示书籍阅读记录信息 -->
<template>
  <el-container @click="selectBook">
    <el-aside width="120px">
      <el-image class="book-img" :src="bookInfo.imgUrl"></el-image>
    </el-aside>
    <el-main>
      <!-- Book's Information -->
      <p class="book-name">{{ bookInfo.name }}</p>
      <p>阅读时间：{{ bookInfo.updated }}</p>
      <p>阅读到第{{ bookInfo.chapterNum }}章</p>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  props: {
    bookInfo: {
      id: String,
      name: String,
      imgUrl: String,
      chapterNum: String | Number,
      updated: Date
    }
  },
  setup (props) {
    
    const router = useRouter()
    const route = useRoute()
    
    // 点击作者名，跳转到 显示作者作品页面
    const viewAuthor = (bookId) => {
      console.log("click author")
    }
    
    // 点击 书籍，进入书籍信息页面
    const selectBook = () => {
      router.push(`/book/${props.bookInfo.id}/${props.bookInfo.chapterNum}`)
    }
    
    return {
      viewAuthor,
      selectBook,
    }
  }
  
})
</script>

<style scoped>
.el-main {
  /* 书籍信息字体大小 */
  font-size: 10px;
  overflow: hidden;
}
.book-short-desc{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  
  color: #666;
}
.el-container {
  cursor: pointer;
}
.book-name {
  font-size: 13px;
  font-weight: bold;
}
.book-author{
  color: #999999;
}
.book-desc {
  word-break: break-word;
  width: 230px;
}
/* img 外 div */
.book-img {
  /* border: 1px #8B4513 solid; */
  vertical-align: middle;
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.el-aside {
  vertical-align: middle;
  /* 相对位置，为了 .book-img 使用绝对位置进行居中 */
  /* border: 1px #7CFC00 solid; */
  position: relative;
  overflow: hidden;
}
.el-container {
  height: 180px;
}
</style>

<style>
div.book-img > .el-image__inner {
  object-fit: scale-down;
}
</style>

